<template>
  <Wx-stepper :max="10" :min="5" @on-change="handleChange" v-model="num" />
  <WxInput v-model="num" @on-change="handleChange" />
  <WxLink
    url="https://www.baidu.com/img/flexible/logo/pc/result.png"
    name="百度一下"
    title="百度一下"
  />
  <button @click="handleClick">click</button>
  <wxCascader :list="list"/>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import WxStepper from "@/components/WxStepper/WxStepper.vue";
import WxInput from "@/components/WxInput/WxInput.vue";
import { Alter } from "@/components/WxAlert/useWxAlert";
import WxLink from "@/components/WxLink/WxLink.vue";
import wxCascader from "@/components/wxCascader/wxCascader.vue";

export default defineComponent({
  components: {
    WxStepper,
    WxInput,
    WxLink,
    wxCascader,
  },
  setup(props, ctx) {
    const handleClick = () => {
      Alter.info({
        content: "创建成功",
      });
    };

    const num = ref(0);

    const handleChange = () => {
      console.log(num.value);
    };

    const list = ref<Array<any>>([
      {
        value: "beijing",
        label: "北京",
        children: [
          {
            value: "gugong",
            label: "故宫",
          },
          {
            value: "tiantan",
            label: "天坛",
          },
          {
            value: "wangfujing",
            label: "王府井",
          },
        ],
      },
      {
        value: "jiangsu",
        label: "江苏",
        children: [
          {
            value: "nanjing",
            label: "南京",
            children: [
              {
                value: "fuzimiao",
                label: "夫子庙",
              },
            ],
          },
          {
            value: "suzhou",
            label: "苏州",
            children: [
              {
                value: "zhuozhengyuan",
                label: "拙政园",
              },
              {
                value: "shizilin",
                label: "狮子林",
              },
            ],
          },
        ],
      },
    ]);

    return {
      handleClick,
      handleChange,
      num,
      list
    };
  },
});
</script>
